<template>
  <el-dialog
    :title="`${dialogType === 'edit' ? '编辑' : '新增'}系统设置`"
    :visible.sync="customVisible"
    width="75%"
    :before-close="handleCancel"
  >
    <el-form class="basic-form" ref="form" :model="customData" label-width="120px" :rules="rules">
      <el-form-item label="公司名称" prop="companyName">
        <el-input v-model="customData.companyName" clearable />
      </el-form-item>
      <el-form-item label="客服电话" prop="serviceTelephone">
        <el-input v-model="customData.serviceTelephone" clearable />
      </el-form-item>
      <el-form-item label="邮箱地址" prop="emailAddress">
        <el-input v-model="customData.emailAddress" clearable />
      </el-form-item>
      <el-form-item label="联系地址" prop="contactAddress">
        <el-input v-model="customData.contactAddress" clearable />
      </el-form-item>
      <el-form-item label="工作时间" prop="workTime">
        <el-input v-model="customData.workTime" clearable />
      </el-form-item>

      <el-form-item label="服务电话文本" prop="serviceTelephoneText">
        <el-input v-model="customData.serviceTelephoneText" clearable />
      </el-form-item>
      <el-form-item label="电子邮箱文本" prop="electronicEmailText">
        <el-input v-model="customData.electronicEmailText" clearable />
      </el-form-item>
      <el-form-item label="成立年份" prop="setupYear">
        <!-- <el-input v-model="customData.setupYear" clearable /> -->
        <el-date-picker v-model="customData.setupYear" type="year" placeholder="选择月"></el-date-picker>
      </el-form-item>

      <el-form-item label="合作医院数量" prop="joinHospitalQuantity">
        <el-input-number v-model="customData.joinHospitalQuantity" controls-position="right" :min="0" clearable></el-input-number>
      </el-form-item>
      <el-form-item label="科研医院数量" prop="scientificHospitalQuantity">
        <el-input-number v-model="customData.scientificHospitalQuantity" controls-position="right" :min="0" clearable></el-input-number>
      </el-form-item>
      <el-form-item label="行业荣耀数量" prop="tradeGloryQuantity">
        <el-input-number v-model="customData.tradeGloryQuantity" controls-position="right" :min="0" clearable></el-input-number>
      </el-form-item>
      <el-form-item label="服务网点" prop="serviceBranch">
        <el-input v-model="customData.serviceBranch" clearable />
      </el-form-item>
      <el-form-item label="办公地址" prop="workAddress">
        <el-input v-model="customData.workAddress" clearable />
      </el-form-item>
      <el-form-item label="经度" prop="longitude">
        <el-input v-model="customData.longitude" clearable />
      </el-form-item>
      <el-form-item label="纬度" prop="latitude">
        <el-input v-model="customData.latitude" clearable />
      </el-form-item>

      <el-form-item label="关注二维码" prop="concernQrCodeId">
        <SingleImageUpload v-model="customData.concernQrCodeId" />
      </el-form-item>
      <el-form-item label="Logo" prop="logoId">
        <SingleImageUpload v-model="customData.logoId" />
      </el-form-item>
      <!-- <el-form-item label="办公地址" prop="workAddress">
        <div class="map-wrap">
          <a-map v-model="customData.workAddress" :lnglat.sync="lnglat" :height="146" />
        </div>
      </el-form-item> -->

      <el-form-item label="关于我们" prop="aboutUs">
        <!-- <el-input
          clearable
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="请输入内容"
          v-model="customData.aboutUs">
        </el-input> -->
        <tinymce ref="tinymce" v-model="customData.aboutUs" :height="300" />
      </el-form-item>
      <el-form-item label="企业文化" prop="corpCulture">
        <!-- <el-input
          clearable
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="请输入内容"
          v-model="customData.corpCulture">
        </el-input> -->
        <tinymce ref="tinymce" v-model="customData.corpCulture" :height="300" />
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button v-waves type="primary" @click="handleOk()">确认</el-button>
      <el-button v-waves @click="handleCancel()">取消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import SingleImageUpload from '@/components/Upload/SingleImage';
import * as systemSettingHttp from '@/api/system-setting';
import { isEnableOptions } from '@/utils/config';
import Tinymce from '@/components/Tinymce';

export default {
  name: 'edit-scene',
  components: { SingleImageUpload, Tinymce },
  props: {
    title: {
      type: String,
      default: '弹框'
    },
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: [Object, undefined]
    }
  },
  data() {
    return {
      dialogType: 'add', // add / edit
      rules: {
        companyName: [{ required: true, message: '请输入公司名称', trigger: 'blur' }],
        serviceTelephone: [{ required: true, message: '请输入客服电话', trigger: 'blur' }],
        emailAddress: [{ required: true, message: '请输入邮箱地址', trigger: 'blur' }],
        contactAddress: [{ required: true, message: '请输入联系地址', trigger: 'blur' }],
        workTime: [{ required: true, message: '请输入工作时间', trigger: 'blur' }],
        serviceTelephoneText: [{ required: true, message: '请输入服务电话文本', trigger: 'blur' }],
        electronicEmailText: [{ required: true, message: '请输入电子邮箱文本', trigger: 'blur' }],
        setupYear: [{ required: true, message: '请输入成立年份', trigger: 'blur' }],
        aboutUs: [{ required: true, message: '请输入关于我们', trigger: 'blur' }],
        corpCulture: [{ required: true, message: '请输入企业文化', trigger: 'blur' }],
        joinHospitalQuantity: [{ required: true, message: '请输入合作医院数量', trigger: 'blur' }],
        scientificHospitalQuantity: [{ required: true, message: '请输入科研医院数量', trigger: 'blur' }],
        tradeGloryQuantity: [{ required: true, message: '请输入行业荣耀数量', trigger: 'blur' }],
        serviceBranch: [{ required: true, message: '请输入 Service Branch', trigger: 'blur' }],
        logoId: [{ required: true, message: '请上传图片', trigger: ['change'] }],
        concernQrCodeId: [{ required: true, message: '请上传关注二维码', trigger: ['change'] }],
        workAddress: [{ required: true, message: '请输入地址', trigger: 'blur' }],
        longitude: [{ required: true, message: '请输入经度', trigger: 'blur' }],
        latitude: [{ required: true, message: '请输入纬度', trigger: 'blur' }]
      },
      isEnableOptions: isEnableOptions,
    }
  },
  computed: {
    customVisible: {
      get() {
        return this.visible;
      },
      set(value) {
        this.$emit('update:visible', value);
      }
    },
    customData: {
      get() {
        return this.data || {};
      },
      set(value) {
        this.$emit('update:data', value);
      }
    }
  },
  methods: {
    handleCancel() {
      this.customVisible = false;
      this.customData = {};
      this.$refs['form'].resetFields();
    },

    // 确认
    handleOk() {
      this.customData = { ...this.customData }
      this.$refs['form'].validate(async (valid) => {
        if (!valid) return false;

        try {
          const date = new Date(this.customData.setupYear);
          const submitData = { ...this.customData, setupYear: date.getFullYear() };

          let res;
          if (this.customData.systemSettingId === void 0) {
            res = await systemSettingHttp.addSystemSetting(submitData);
          } else {
            res = await systemSettingHttp.updateSystemSetting(submitData);
          }

          this.$message.success('提交成功');
          this.$emit('loading', res);
          this.handleCancel();
        } catch(e) {
          console.log('edit solution handleOk: ', e);
          this.$message.error('提交失败');
        }
      });
    },
  },
  watch: {
    data(value) {
      // 默认有 __ob__ 值
      if (Object.getOwnPropertyNames(value).length > 1) {
        this.dialogType = 'edit';
      } else {
        this.dialogType = 'add';
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.map-wrap {
  float: left;
  width: 236px;
  border: 1px dashed #d9d9d9;
}

.map-wrap + span {
  display: block;
  float: left;
  margin-left: 10px;
}
</style>
